<!-- 播客主页/通用设置-标签与目录 -->
<!--  -->
<template>
    <div class="common-layout">
        <el-text class="ac-pwd-title">
            标签和目录
        </el-text>
        <!-- <div class="addDirectory">
            <el-input placeholder="目录名" v-model="valueDirecotry"></el-input>
            <el-button type="primary" @click="addDirectory">添加新目录</el-button>
        </div> -->

        <el-tree class="tree" style="max-width: 600px;" :data="TreeData" :props="defaultProps" node-key="directoryid"
            :expand-on-click-node="true">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <!-- 显示目录名称 -->
                    <span> {{ data.directoryname || data.tagname }}</span>
                    <span>
                        <el-button v-if="data.children" type="primary" text @click="appendDirectory(data)">
                            添加目录
                        </el-button>
                        <el-button type="primary" text @click="appendTag(data)">
                            添加标签
                        </el-button>
                        <el-button v-if="data.children" style="margin-left: 8px" type="danger" text
                            @click="removeDirectory(data)">
                            删除该目录
                        </el-button>
                        <el-button v-if="data.children" style="margin-left: 8px" type="warning" text
                            @click="editDirectory(data)">
                            修改目录名
                        </el-button>


                        <el-button v-if="!data.children" style="margin-left: 8px" type="danger" text
                            @click="removeTag(data)">
                            删除该标签
                        </el-button>
                        <el-button v-if="!data.children" style="margin-left: 8px" type="warning" text
                            @click="editTag(data)">
                            修改标签名
                        </el-button>
                    </span>
                </span>

            </template>
        </el-tree>
    </div>
</template>
<script lang="ts" setup>
import store from "@/store";
import request from "@/utils/request";
import { data, value } from "dom7";
import { ElMessage, ElMessageBox } from "element-plus";
import type Node from "element-plus/es/components/tree/src/model/node";
import { onMounted, ref } from "vue";

// 标签
interface Tag {
    tagid: number,
    directoryid: number,
    tagname: string,
    isDeletedTag: number
}
// 标签目录树
interface Tree {
    directoryid: number,
    directoryname: string,
    children?: Tag[],
}
// 标签树的默认值
const defaultProps = ref<Tree[]>([])
// 测试树形节点数据
const TreeData = ref<Tree[]>()
// 操作标签目录（包括添加和修改）弹窗状态
const dialogStatus = ref(false)
// 修改目录 弹窗 
// 获取标签和目录
const getDirectoryTag = async () => {
    const userId = store.getters.getUser.userId;

    try {
        const res = await request.get('/directory/queryAll', {
            params: {
                userid: userId
            }
        })

        for (var item of res.data) {
            await request.get('/tag/queryAll', {
                params: {
                    directoryid: item.directoryid
                }
            }).then(res => {
                item.children = res.data
            })

        }
        console.log(res.data);
        TreeData.value = res.data;
    } catch (error) {
        ElMessage({
            message: '获取标签和目录失败，请重试',
            type: 'error'
        })
    }
}

// 对目录进行操作
// 添加目录
const appendDirectory = async (data: Tree) => {
    ElMessageBox.prompt('目录名:', '添加目录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{2,9}$/,
        inputErrorMessage: '字数请大于1而小于10',
    })
        .then(async ({ value }) => {
            const userId = store.getters.getUser.userId;
            try {
                await request.post('/directory/add', {
                    userid: userId,
                    directoryid: null,
                    directoryname: value,
                    isDeletedDirectory: 0
                })
                await getDirectoryTag()
                ElMessage({
                    message: '添加成功',
                    type: 'success'
                })
            } catch (error) {
                ElMessage({
                    message: '添加失败，请重试',
                    type: 'error'
                })
            }
        })
        .catch(() => {
            ElMessage({
                message: '取消操作',
                type: 'info'
            })
        })
}
// 修改目录
const editDirectory = async (data: Tree) => {
    ElMessageBox.prompt('目录名:', '修改目录名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{2,9}$/,
        inputErrorMessage: '字数请大于1而小于10',
    })
        .then(async ({ value }) => {
            const userId = store.getters.getUser.userId;
            await request.put('/directory/edit', {
                userid: userId,
                directoryid: data.directoryid,
                directoryname: value,
                isDeletedDirectory: 0
            })

            await getDirectoryTag()

            ElMessage({
                message: '修改成功',
                type: 'success'
            })
        })
        .catch(() => {
            ElMessage({
                message: '取消操作',
                type: 'info'
            })
        })
}
// 删除目录
const removeDirectory = async (data: Tree) => {
    ElMessageBox.confirm(
        '是否删除该目录',
        '删除目录提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    )
    .then( async () => {
        await request.delete('/directory/delete',{
            params:{
                id:data.directoryid
            }
        })
        await getDirectoryTag()
        ElMessage({
            message:'删除成功',
            type:'success'
        })
    })
    .catch( () => {
        ElMessage({
            message:'删除失败',
            type:'error'
        })
    })
}
// 对标签进行操作
// 添加标签
const appendTag = async (data: Tag) => {
    ElMessageBox.prompt('标签名:', '添加标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{2,9}$/,
        inputErrorMessage: '字数请大于1而小于10',
    })
        .then(async ({ value }) => {
            await request.post('/tag/add', {
                tagid: null,
                directoryid: data.directoryid,
                tagname: value,
                isDeletedTag: 0
            })
            await getDirectoryTag()
            ElMessage({
                message: '添加成功',
                type: 'success'
            })
        })
        .catch(() => {
            ElMessage({
                message: '取消操作',
                type: 'info'
            })
        })
}
// 编辑标签
const editTag = async (data: Tag) => {
    ElMessageBox.prompt('标签名:', '修改标签名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{2,9}$/,
        inputErrorMessage: '字数请大于1而小于10',
    })
        .then(async ({ value }) => {
            await request.put('/tag/edit',{
                tagid:data.tagid,
                directoryid:data.directoryid,
                tagname:value,
                isDeletedTag:0
            })
            await getDirectoryTag()

            ElMessage({
                message: '修改成功',
                type: 'success'
            })
        })
        .catch(() => {
            ElMessage({
                message: '取消操作',
                type: 'info'
            })
        })
}
// 删除标签
const removeTag = async (data: Tag) => {
    ElMessageBox.confirm(
        '是否删除该标签',
        '删除标签提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    )
    .then( async () => {
        await request.delete('/tag/delete',{
            params:{
                id:data.tagid
            }
        })
        await getDirectoryTag()
        ElMessage({
            message:'删除成功',
            type:'success'
        })
    })
    .catch( () => {
        ElMessage({
            message:'删除失败',
            type:'error'
        })
    })
}



// 初始化
onMounted(
    () => {
        getDirectoryTag()
    }
)
</script>
<style lang="scss" scoped>
@use './SettingLabelDirectory.scss';
</style>
